<template>
  <div class="legal-instrument">
    <!--    法律文书查询表单-->
    <div class="search">
      <div class="title">法律文书列表</div>
      <el-form :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline" size="mini"
               ref="search">
<!--        <el-form-item label='合同id' prop="co_id">-->
<!--          <el-input v-model="searchForm.co_id" placeholder="请填入数字"-->
<!--                    oninput="if(isNaN(value)){value=value.replace(/[^0-9]/g,'')}" clearable></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label='合同标题' prop="co_title">
          <el-input v-model="searchForm.co_title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item label="合同类别" prop="co_kind">
            <el-select v-model="searchForm.co_kind" >
              <el-option label="全部" :value="0"></el-option>
              <el-option label="日常业务" :value="1"></el-option>
              <el-option label="劳动人事" :value="2"></el-option>
              <el-option label="劳动文件" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

<!--    &lt;!&ndash;    新增法律文书按钮&ndash;&gt;-->
<!--    <el-row>-->
<!--      <el-col>-->
<!--        <el-button type="primary" @click="showAddCateDialog" size="mini">新增</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <!--   法律文书列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini">
      <el-table-column
        label="#"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="co_id"
        label="合同id">
      </el-table-column>
      <el-table-column
        prop="co_title"
        label="合同标题">
      </el-table-column>
      <el-table-column
        prop="co_kind"
        label="合同类型">
        <template slot-scope="scope">
          <span v-if="scope.row.co_kind==1">日常业务</span>
          <span v-else-if="scope.row.co_kind==2">劳动人事</span>
          <span v-else-if="scope.row.co_kind==3">劳动文件</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="co_url"
        label="合同模板下载"
        >
        <template slot-scope="scope">
          <a class="aLink" :href="scope.row.co_url" :download='getFileName(scope.row)'>合同模板下载</a>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
<!--          <el-button type="primary" size="mini" @click="deleteContractClick(scope.row)">删除</el-button>-->
          <el-button type="primary" size="mini" @click="updateContractClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--    编辑合同对话框-->
    <el-dialog title="编辑服务商信息" :visible.sync="updateDialogVisible" width="50%" @close="closeUpdateDialog"
               :close-on-click-modal="false">
      <el-form :model="updateContractForm" :rules="updateContractRules" ref="updateContractRef" label-width="100px">
        <el-form-item label="合同id" prop="co_id">
          <el-input v-model="updateContractForm.co_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="合同标题" prop="co_title">
          <el-input v-model="updateContractForm.co_title" disabled></el-input>
        </el-form-item>
        <el-form-item label="合同类型" prop="co_kind">
          <el-select v-model="updateContractForm.co_kind" disabled>
            <el-option label="日常业务" :value="1"></el-option>
            <el-option label="劳动人事" :value="2"></el-option>
            <el-option label="劳动文件" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同url" prop="co_url">
          <el-upload
            class="upload-demo"
            ref="upload"
            :data="uploadData"
            action="https://upload.qiniup.com"
            :on-change="changeFile"
            :file-list="fileList"
            :auto-upload="false"
            :before-upload="beforeUpload"
            :on-success="onSuccess"
            :on-error="onError"
            accept="application/msword,text/plain,application/zip,application/pdf">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!--            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
            <div slot="tip" class="el-upload__tip">可上传的文件类型为txt,doc,pdf和zip</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onUpdateContract">编辑合同</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>


<script>
import {getContractByKey,deleteContract,updateContract} from '@/network/business/legalInstrument'
import {getUploadToken} from "@/network/getToken";

export default {
  name: "LegalInstrument",
  data(){
    return{
      fileList:[],  //文件上传列表
      currentPage: 1,  //当前页面
      pageSize:5,  //页面条数，默认为10条
      addDialogVisible:false,//增加合同对话框
      updateDialogVisible:false, //编辑合同对话框
      uploadData:{  //文件上传的表单
        token:'',
        key:''
      },
      searchForm:{  //查询的表单
        // co_id:'',
        co_title:'',
        co_kind: 0
      },
      updateContractForm:{  //编辑合同表单
        co_id:'',
        co_title:'',
        co_kind:'',
        co_url:'',
      },
      updateContractRules:{ //编辑合同规则
        co_url:[{ required: true, message: '请上传文件', trigger: 'blur' }]
      },
      tableData:[],  //从数据库中获取
      showTableData:[]   //分页显示的
    }
  },
  created() {
    this.getContractFromServer();
    getUploadToken().then(res=>{
      if(res.data.status==200){
        this.uploadData.token = res.data.data;
      }
    })
  },
  methods:{
    getContractFromServer(){
      this.currentPage = 1;
      getContractByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.getTableData();
      })
    },
    getFileName(contract){  //计算文件名
      const index = contract.co_url.lastIndexOf(".");
      if(index!=-1){
        return "合同"+contract.co_id+contract.co_url.substring(index);
      }
      return "合同"+contract.co_id;
    },
    //文件上传成功
    onSuccess(file){
      this.updateContractForm.co_url= "http://r08pre7o1.hd-bkt.clouddn.com/"+file.key;
      updateContract(this.updateContractForm).then(res=>{
        if(res.data.status==200){
          this.$message.success(`合同${this.updateContractForm.co_id}的模板更新成功！`);
          this.getContractFromServer();
          this.fileList = [];
          this.updateDialogVisible = false;
        }else{
          this.$message.error(`合同${this.updateContractForm.co_id}的模板更新失败，请重新操作！`);
        }
      })
    },
    //文件上传失败
    onError() {
      this.$message.error("文件上传失败，请重新操作！");
    },
    //文件上传之前
    beforeUpload(file){
      const index = file.name.lastIndexOf(".");
      this.uploadData.key = this.updateContractForm.co_id+"contract"+file.name.substring(index);
      return true;
    },
    //点击删除合同
    // deleteContractClick(contract){
    //   this.$confirm(`合同${contract.co_id}会被永久删除,是否继续?`,'提示',{
    //     confirmButtonText:'确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(()=>{
    //     deleteContract(contract.co_id).then(res=>{
    //       if(res.data.status==200){
    //         this.$message.success(`合同${contract.co_id}删除成功！`);
    //         this.getProviderListFromServe();
    //       }
    //       if(res.data.status==500){
    //         this.$message.error(`合同${contract.co_id}删除失败！`)
    //       }
    //     })
    //   }).catch(()=>{
    //     return this.$message('已取消删除！');
    //   })
    // },
    //编辑合同
    onUpdateContract(){
      if(this.fileList.length==0){
        return this.$message.error("请先上传文件！");
      }
      //上传到七牛云
      this.$refs.upload.submit();
    },
    //上传文件时
    changeFile(file,fileList){
      if(fileList.length>0){
        this.fileList = [fileList[fileList.length-1]];
      }
    },
    //点击编辑合同
    updateContractClick(contract){
      this.updateContractForm = contract;
      this.updateDialogVisible =true;
    },
    closeUpdateDialog(){ //关闭编辑对话框
      this.fileList = [];
      this.$refs.updateContractRef.resetFields();
      this.updateDialogVisible = false;
    },
    resetForm(formName){  //重置查询表单
      this.$refs[formName].resetFields();
      this.getContractFromServer();
    },
    onSubmit(){  //查询
      this.getContractFromServer();
    },

    //分页操作
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
    // showAddCateDialog() { //点击添加按钮
    //   this.addDialogVisible = true;
    // },
    // addDialogClosed(){  //关闭“添加合同”对话框
    //   this.addDialogVisible =false;
    // },
  },
  computed:{
    total(){ //总条数
      return this.tableData.length;
    }
  },
}
</script>

<style scoped>
.aLink{
  color:#66b1ff;
}
.legal-instrument{
  height: 100%;
}
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
/deep/ .el-list-enter-active,
/deep/ .el-list-leave-active {
  transition: none;
}

/deep/ .el-list-enter,
/deep/ .el-list-leave-active {
  opacity: 0;
}
</style>
